<template>
	<view class="Collect padding-top-sm">
		<!-- 页面内容 -->
		<CardGrid @handle="handle" @delete="deleteFn" :list="value" type="Collect" ></CardGrid>
		<!-- 状态 没有更多数据了-->
		<Divider  v-if="value && value.length>0" text="没有更多数据了"/>
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
		<!-- 对话框 -->
		<Modal :show="option.show" @confirm="confirmModelFn" @cancel="cancelModelFn" title="提示">
			<view class="padding">
				{{option.name}}，是否确认取消收藏?
			</view>
		</Modal>
	</view>
</template>

<script>
	import CardGrid from '@/plugin/card_grid.vue';
	import Divider from '@/plugin/divider.vue';
	import Modal from '@/plugin/modal.vue';
	
	import * as api from '@/api/Collect/index.js';
	export default {
		components:{CardGrid,Divider,Modal},
		data(){
			return {
				value:null,
				option:{
					show:false
				}
			}
		},
		onLoad(){
		  this.collectionFn()	
		},
		methods:{
			// 前往阅读页面
			handle(item){
			  uni.navigateTo({
			  	url:'/pages/ReadBook/index?id='+item.id
			  })	
			},
			// 关闭弹出框
			cancelModelFn() {
				this.$set(this.option,'show',false);
			},
			// 确认关闭弹窗
			async confirmModelFn(){
				try{
					let res=await api.remove(this.option.id);
					if(res.code===0){
						this.collectionFn()
					}
				}finally{
					this.cancelModelFn();
				}
			},
			// 打开弹窗
			deleteFn(value){
				this.option={
					show:true,
					...value
				}
			},
			// 页面数据
			async collectionFn(){
				let res=await api.collection();
				if(res.code===0){
					this.value=res.data;
				}
			}
		}
	}
</script>

<style>
</style>